<template>
    <div class="productDetail">
        <van-nav-bar
                left-arrow
                title="礼包详情"
                @click-left="$navBack('/product/index')"></van-nav-bar>
        <van-swipe
            class="swiperWrap"
            :autoplay="$global.swipeAutoplay" :duration="$global.swipeDuration">
            <van-swipe-item v-for="(item,index) in productInfo.pictureList" v-bind:key="index">
                <img :src="item ? item : imgSrc[0]" class="imgCp" />
            </van-swipe-item>
        </van-swipe>
        <div class="title">
            <span class="icon">￥</span>
            <span class="price font-size-20-pk">{{productInfo.productPrice}}</span>
            <div class="name font-size-16-pk">{{productInfo.productName}}</div>
        </div>
        <div class="detail page-pad-pk">
            <DetailRichText :detail-html="productInfo.productContent" />
        </div>
        <div class="fixed-footer">
            <div class="notice page-pad-pk" v-if="showNotice">
                <div class="close">
                    <van-icon name="close" size="22" @click="hideNotice"/>
                </div>
                <div class="notice-title">
                    {{productInfo.tipTitle}}
                </div>
                <div class="notice-body">
                    {{productInfo.tipContent}}
                </div>
            </div>
            <pk-button type="danger" :loading="buyLoading"  block square height="48px" @click="toBuy">立即购买</pk-button>
        </div>
    </div>
</template>

<script>
    import DetailRichText from "../goods/DetailRichText"
    export default {
        name: "detail",
        components:{
            DetailRichText
        },
        data(){
            return {
                productId:this.$route.query.productId,
                productInfo:[],
                imgSrc:[
                    require("@img/img-error.png"),
                ],
                showNotice:true,
                buyLoading: false
            }
        },
        created() {
            this.getProduct();
        },
        methods:{
            onClickLeft() {
                this.$router.push({
                    path: "/product/index"
                })
            },
            getProduct() {
                this.$api.getProduct(this.productId).then(res => {
                    let result = this.$resData(res);
                    if(result) {
                        this.productInfo = result;
                    }
                });
            },

            hideNotice(){
                this.showNotice = !this.showNotice;
            },
            async toBuy(){
                this.buyLoading = true;
                await this.$util.getUserInfo(this.$store);
                this.buyLoading = false;
                this.$router.push({
                    path:"/product/order",
                    query:{
                        productId :this.productId
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .productDetail {
        .van-swipe{
            background-color: #ffffff;
            height: 100vw;
            .van-swipe-item {
                width: 100vw;
                height: 100vw;

                img {
                    width: 100%;
                    max-height: 100vw;
                }
            }
        }
        .title{
            padding:20px 15px;
            color: #D82D11;
            background-color: #ffffff;
            border-top: 1px solid #f5f5f5;
            margin-bottom: 15px;
            box-shadow: 1px 1px 12px 1px #ffe4e4;
            .icon{
                display: inline-block;
                font-size: 12px;
            }
            .price{
                display: inline-block;
            }
            .name{
                color: #1A1A1A;
                padding-top: 4px;
                font-weight: bold;
            }
        }
        .detail{
            padding-top: 15px;
            padding-bottom: 15px;
            margin-bottom: 15px;
            background-color: #ffffff;
            text-align: center;
            .pk-icon-arrow-down-d{
                font-size: 14px;
            }
            .pk-icon-arrow-up-d{
                font-size: 14px;
            }
        }
        .fixed-footer{
            position: fixed;
            bottom: 0;
            width: 100%;
            .notice{
                background:rgba(0,0,0,.8);
                opacity:0.5;
                color:#ffffff;
                padding-bottom: 15px;
                .close{
                    position: absolute;
                    right: 10px;
                    top: 10px;
                    color: #b5b5b5;
                }
                .notice-title{
                    background-color: transparent;
                    font-weight: 500;
                    padding:12px 0 8px;
                }
                .notice-body{
                    background-color: transparent;
                    line-height: 1.5;
                }

            }
            .btn-buy{
                padding:15px 0;
                background-color: #D82D11;
                color: #ffffff;
                text-align: center;
            }
        }
    }
</style>
